import React from 'react';

import {
  View, StyleSheet, Text, TouchableOpacity,
} from 'react-native';
import { Icon } from 'native-base';

export default ({ name, _click }) => (
  <TouchableOpacity style={styles.container} onPress={() => _click()}>
    <View style={styles.leftStyle}>
      <Text style={styles.fontStyle}>{name}</Text>
    </View>
    <View style={styles.rightStyle}>
      <Icon name="arrow-forward" style={{ color: 'white' }} />
    </View>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 2,
    padding: 5,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'rgba(219,219,219,0.52)',
    margin: 5,
  },
  leftStyle: {
    flex: 0.9,
    flexWrap: 'wrap',
  },
  rightStyle: {
    flex: 0.1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  fontStyle: {
    color: 'white',
  },
});
